<template>
  <div class="nav-center">
    <ul>
      <li><div class="one"><a href="http://guozhivip.com/mvs.html" target="_blank">免费观影追剧</a></div></li>
      <li><div class="two"><a href="https://www.coderutil.com/" target="_blank">免费在线工具</a></div></li>
      <li><div class="three"><a href="https://bz.zzzmh.cn/index" target="_blank">免费壁纸美图</a></div></li>
      <li><div class="four"><a href="https://www.gaoding.com/utms/ffbe7c68a5f7e8356e21e3b74b52bc7d" target="_blank">AI自动抠图</a></div></li>
      <li><div class="five"><a href="https://fm.douban.com/" target="_blank">一首歌的时间</a></div></li>
      <li><div class="six"><a href="https://datayi.cn/w/a9a0V3lo" target="_blank">秒传大文件</a></div></li>
      <li><div class="seven"><a href="http://guozhivip.com/lab/" target="_blank">开心游乐场</a></div></li>


    </ul>
  </div>
</template>

<script>
export default {
  name: "NavCenter"
}
</script>

<style scoped lang="scss">
.nav-center{

  width: 100%;
  text-align: center;
  margin-bottom: 36px;
  ul{
    display: inline-block;
    display: flex;
    list-style: none;
    justify-content: center;
    margin: 0;
    padding-left: 0px ;
    li {
      width: 156px;
      position: relative;
      margin: 0px 5px;
      background-color: #3A71A8;
      div {
        width: 156px;
        height: 90px;
        position: absolute;
        position: absolute;
        top: -95px;
        text-align: center;
        color: white;
        border-radius: 3px;

        a {
          line-height: 90px;
          text-decoration: none;
          color: #fff;
        }
      }
    }
  }
  .one{
    background: #666 url(../../../public/image/nav-center/b1.jpg) center no-repeat;
  }
  .two{
    background: #666 url(../../../public/image/nav-center/b2.jpg) center no-repeat;
  }
  .three{
    background: #666 url(../../../public/image/nav-center/b3.jpg) center no-repeat;
  }
  .four{
    background: #666 url(../../../public/image/nav-center/b4.jpg) center no-repeat;
  }
  .five{
    background: #666 url(../../../public/image/nav-center/b5.jpg) center no-repeat;
  }
  .six{
    background: #666 url(../../../public/image/nav-center/b6.jpg) center no-repeat;
  }
  .seven{
    background: #666 url(../../../public/image/nav-center/b7.jpg) center no-repeat;
  }
}
</style>
